<template>
	<zkView ref="zkView" v-slot:uContainer>
		<view class="container">
			<view class="status">
				<view class="statusScroll">
					<view class="statusItem" v-for="status in statusArr" :key="status.key" @click="switchStatus(status)">
						<text :class="statusSel===status.key?'active':''">{{status.title}}</text>
					</view>
				</view>
			</view>
			<view class="listScroll">
				<view class="list" v-if="orderList&&orderList.length">
					<view class="orderItem" v-for="orderItem in orderList" :key="orderItem._id" @click="toOrderDetail(orderItem)">
						<view class="orderNo">
							<view class="noTxt">
								<text>No: </text>
								<text>{{orderItem._id}} </text>
							</view>
							<view class="statusTip">
								<text>{{["","待付款","待发货","已发货","已收货","已失效","已退款","已取消"][orderItem.status]}}</text>
								<text v-if="orderItem.status==='1'&&orderItem.invalid_time_str"
									class="invalidTime">剩余{{orderItem.invalid_time_str}}</text>
							</view>
						</view>
						<view class="orderLine" />
						<block v-if="orderItem.product_list&&orderItem.product_list.length>0">
							<view class="orderProduct" v-for="proItem in orderItem.product_list"
								:key="`${orderItem._id}-${proItem.cartId}`">
								<block v-if="proItem&&proItem.productId">
									<image class="thumb" mode="aspectFill" :src="formatThumb(proItem.productInfo.thumb)"
										@click.stop="toProductDetail(proItem)">
									</image>
									<view class="info">
										<view class="name">
											<text>{{proItem.spuInfo.name}}</text>
										</view>
										<view class="nameSub">
											<view class="price">
												<text>￥</text>
												<text>{{formatPrice(proItem.spuInfo.price_active)}}</text>
												<text>￥</text>
												<text>{{formatPrice(proItem.spuInfo.price_original)}}</text>
											</view>
											<view class="num">
												<text>x{{proItem.count}}</text>
											</view>
										</view>
									</view>
								</block>
							</view>
							<view class="orderAmount">
								<text>共{{orderItem.total_count}}件，</text>
								<text>总价￥{{formatPrice(orderItem.total_money)}}，</text>
								<text>优惠￥{{formatPrice(orderItem.total_discount)}}，</text>
								<view class="need">
									<text>实付￥</text>
									<text>{{formatPrice(orderItem.need_money)}}</text>
								</view>
							</view>
							<view class="orderLine" />
							<view class="orderAction">
								<view class="orderTime">
									<text>{{formatDate(orderItem.create_time)}}下单</text>
								</view>
								<!-- // 1-待支付；2-已支付；3-已发货；4-已收货；5-已失效；6-已退款；6-已取消； -->
								<view class="actionBtn grayBtn" v-if="orderItem.status==='1'||orderItem.status==='2'"
									@click.stop="cancelOrder(orderItem)">
									<text>取消订单</text>
								</view>
								<view class="actionBtn redBtn" v-if="orderItem.status==='1'" @click.stop="payOrder(orderItem)">
									<text>立即支付</text>
								</view>
								<view class="actionBtn blueBtn" v-if="['3'].indexOf(orderItem.status)>=0"
									@click.stop="getDelivery(orderItem)">
									<text>查看物流</text>
								</view>
								<view class="actionBtn blueBtn" v-if="['3'].indexOf(orderItem.status)>=0"
									@click.stop="onReceived(orderItem)">
									<text>收到货了</text>
								</view>
								<view class="actionBtn grayBtn" v-if="['4'].indexOf(orderItem.status)>=0"
									@click.stop="toService(orderItem)">
									<text>我要售后</text>
								</view>
								<!-- 
								<view class="actionBtn greenBtn" v-if="['4','5','6','7'].indexOf(orderItem.status)>=0"	@click.stop="">
									<text>再买一单</text>
								</view> 
								-->
							</view>
						</block>
					</view>
					<view class="noMore">
						<text>触到底线了哦~</text>
					</view>
				</view>
				<view class="noData" v-else>
					<image mode="widthFix" src="/static/empty.png"></image>
					<text>暂无订单</text>
				</view>
			</view>
		</view>
	</zkView>
</template>

<script>
	import indexJs from './index.js';
	import mixins from '@/common/mixins.js';
	export default {
		components: {},
		mixins: [mixins],
		...indexJs
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>